<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="set">set</button>
    <button id="get">get</button>
    <button id="remove">remove</button>
    <button id="clear">clear</button>
</body>
<script>
    //web存储   分为三种
    //1.cookie  有时间显示，存储大小几kb
    //2.localStorage  没时间限制，只要不手动清除，就一直存在，存储大小几mb
    //3.sessionStorage  没时间限制，页面关闭后自动清除，存储大小几mb
</script>
<script>
    document.getElementById('set').onclick = function () {
        // 存数据  setItem(key,value) value只能是基本类型
        console.log('存数据');
        var obj = {
            name: '存'
        }
        localStorage.setItem('key1', 'value1')
        localStorage.setItem('key2', 'value2')
        localStorage.setItem('obj', JSON.stringify(obj))
    }
    document.getElementById('get').onclick = function () {
        // 取数据  getItem(key)
        console.log(localStorage.getItem('key1'));
        console.log(JSON.parse(localStorage.getItem('obj')));

        // 通过索引获取key 
        console.log(localStorage.key(0));
        console.log(localStorage.key(1));
        console.log(localStorage.key(2));
    }
    document.getElementById('remove').onclick = function () {
        // 移除数据 removeItem(key)
        localStorage.removeItem('key1')
    }
    document.getElementById('clear').onclick = function () {
        // 清除数据 clear()
        localStorage.clear()
    }
</script>
</html>